<template>
    <div :class="`${PREFIX}`">
        <p :class="`${PREFIX}-title`">为什么要选择99友婚</p>
        <Cardlist :list="list" />
        <Download :class="`${PREFIX}-download`"/>
    </div>
</template>
<script setup>
const PREFIX = 'page2'
import Cardlist from './components/Cardlist.vue'
import Download from '../components/Download.vue';
const list = [
    {
        img: new URL('../assets/img/qiandai.png', import.meta.url).href,
        title: '经济支持',
        con: '友婚可以提供一种经济上的互助和支持，降低单身生活的经济压力'
    },
    {
        img: new URL('../assets/img/shehui.png', import.meta.url).href,
        title: '缓解社会压力',
        con: '在一些文化中，未婚或单身可能会面临社会压力'
    },
    {
        img: new URL('../assets/img/gongxiangdian.png', import.meta.url).href,
        title: '共享责任',
        con: '友婚的伙伴可以共享日常生活的责任，如家务、照顾孩子等'
    },
    {
        img: new URL('../assets/img/aiqingyuehui.png', import.meta.url).href,
        title: '情感支持',
        con: '友婚可以提供稳定的情感支持和陪伴，满足人们对亲密关系的需求'
    }
]
</script>
<style lang="less">
.page2 {
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 85px 91px 72px 110px;
    box-sizing: border-box;

    &-title {
        height: 50px;
        color: #666666;
        text-align: center;
        font-size: 42px;
        line-height: 50px;
        margin-bottom: 110px;
    }
    &-download {
        margin-top: 60px;
    }
}
</style>